<template>
  <div>
    <el-dialog
      :title="this.$t('common.importAll')"
      :visible.sync="Visible"
      width="700px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="dialogBox">
        <div class="upDataGroup">
          <span class="text" >{{this.$t('ExpressOrderManagementLang.Forecast_order')}}：</span>
          <el-upload
            class="avatar-uploader"
            action="#"
            :on-change="handleChange"
            :auto-upload="false"
            accept=".xls,.xlsx"
            :file-list="fileList">
            <el-button class="btnItem" size="small" type="primary">
              <img src="@/assets/img/fileSelect.png" alt="">
              {{this.$t('ExpressOrderManagementLang.Select_file')}}
            </el-button>
          </el-upload>
          <div class="btnGroup">
            <el-button type="primary" @click="confirm" class="btnItem" size="small">
              <img src="@/assets/img/fileUp.png" alt="">
              {{this.$t('ExpressOrderManagementLang.Upload')}}
            </el-button>
            <el-button type="primary"  class="btnItem" size="small" @click="handleTemplate">
              <img src="@/assets/img/fileDown.png" alt="">
              {{this.$t('ExpressOrderManagementLang.Download_template')}}
            </el-button>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        > -->
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {
  },
  props: {
    // 接收绑定参数
    
  },
  data() {
    return {
      Visible: false,
      fileList:[],
      outdata: "",
      confirmTrue: true,
    };
  },
  created() {
   
  },
  mounted() {},
  watch: {},
  methods: {
    init() {
      this.Visible = true;
    },
    handleChange(file,fileList){
      this.fileList=[file]
      this.outdata=file.raw
    },
    confirm() {
      if (this.confirmTrue&&this.fileList.length==1) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000);
        let params = new FormData();
        params.append("ht_file", this.outdata);
        this.$postForm("batchAddOrder", params).then((res) => {
          if(res.success){
            this.cancel()
            this.$message.success(res.msg);
            this.$emit("success");
          }else{
            if(res.data.length>0){
              this.handleDerive(res.data);
            }else{
              this.$refs.MessageReminder.init(this.$t('ExpressOrderManagementLang.No_data_moment'));
            }
            this.fileList = [];
            this.outdata=""
          }
          this.confirmTrue = true;
          
        });
      }
    },
    // 快递信息模板下载
    handleTemplate() {
      window.open(`${this.$baseUrl}/orderTemplate.xls?${new Date().getTime()}`)
    },
    handleDerive(arr) {
      let str = [];
      for (const key in arr[0]) {
        str.push(key);
      }
      let sourceOriginAmount = arr;
      this.loading = true; // 设置一个loading，生成Excel需要时间
      import("@/utils/vendor/Export2Excel1").then((excel) => {
        // 导入js模块
        const tHeader = str; //表头
        const filterVal = str; //每个标题对应的字段
        const list = (sourceOriginAmount || []).map((item, key) => {
          // 通过 map 方法遍历，组装数据成上面的格式

          let obj1 = {};
          filterVal.forEach((el) => {
            obj1[el] = item[el];
          });
          return obj1;
        });

        if (list) {
          const data = this.formatJson(filterVal, list); // 生成json数据
          excel.export_json_to_excel({
            // 调用excel方法生成表格
            header: tHeader,
            data,
            filename: this.$t('ExpressOrderManagementLang.Error_Details'),
          });
        } else {
          this.$refs.MessageReminder.init(this.$t('ExpressOrderManagementLang.No_data_moment'));
        }
        this.loading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    //取消修改
    cancel() {
      this.fileList = [];
      this.outdata=""
      this.Visible = false;
    },
  },
};
</script>

<style scoped lang="less" >
  .dialogBox .dialogBoxItem .dialogBoxItemRow{
    width: 23%;
  }
  /deep/ .el-dialog__wrapper{
    .el-dialog{
      min-width: 500px;
    }
  }
  .upDataGroup{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding-top: 20px;
    .text{
      position: absolute;
      top: 5px;
      left: 5px;
    }
    /deep/ .avatar-uploader{
      display: flex;
      align-items: center;
      .el-upload-list__item:first-child{
        margin-top: 0;
      }
    }
    .btnGroup{
      display: flex;
      align-items: center;
    }
    /deep/ .btnItem.el-button{
      border: 1px solid #ccc;
      background-color: #fff;
      color: #000;
      padding-top: 8px;
      height: 36px;
      span{
        display: flex;
        align-items: center;
        font-size: 12px;
        gap: 4px;
      }
    }
  }
</style>